<template>
    <div class="uli">
      <div class="item" v-for="item in itemList" :key="item.id">
        <img :src="item.img" alt="" width="100%" class="">
      </div>
    </div>
</template>

<script>
export default {
  name: 'Uli',
  data () {
    return {
      itemList: [{id: 1, img: 'static/img/jpro_01.jpg'},
        {id: 2, img: 'static/img/jpro_02.jpg'},
        {id: 3, img: 'static/img/jpro_03.jpg'},
        {id: 4, img: 'static/img/jpro_04.jpg'}]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .uli {
    width: 88%
    margin: 2rem auto
    .item {
      box-sizing: none;
      border: 1px solid #c7c7c7;
      border-radius: 14px;
      display: inline-block
      width: calc(25% - 1.2rem)
      padding: 1rem
      box-shadow: 0 0 4px #ccc;
    }
    .item:hover {
      box-shadow: 2px 4px 6px #c7c7c7;
    }
    .item + .item {
      margin-left: 1.5rem;
    }
  }
</style>
